<template>
	<view class="wrapper">
		<head-title titleText="动态详情" showLeftButton="true"></head-title>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height:windowH+'px'}">
			<view @tap="bindlist" v-if="msg!=''" class="list">
				<view class="box">
					<view class="user flex_row">
						<image @tap.stop="bindUser(msg.user.id)" class="headPic" :src="msg.user.head_img" mode="aspectFill"></image>
						<view class="text flex_col">
							<view class="name flex_row">
								<text>{{msg.user.nickname}}</text>
								<image v-if="msg.user.sex==1" src="../../static/image/man.png" mode="aspectFill"></image>
								<image v-else src="../../static/image/woman.png" mode="aspectFill"></image>
							</view>
							<view class="time">{{msg.user.send_time}}</view>
						</view>
						<view @tap.stop="bindDel(msg.content.id)" v-if="msg.is_me==1" class="report">删除</view>
						<view v-else @tap.stop="bindReport(msg.content.id)" class="report">举报</view>
					</view>
					<view class="words">{{msg.content.c_content}}</view>
					<view class="flex_row img" :class="{one:msg.img_arr.c_img.length==1,'two':msg.img_arr.c_img.length==2}">
						<block v-for="(img,imgs) in msg.img_arr.c_img" :key="imgs">
							<image @tap="lookImg(imgs)" :src="img.c_img" mode="aspectFill"></image>
						</block>
					</view>
				</view>
				<view class="icon flex_row">
					<view class="flex_row">
						<image src="../../static/image/kan.png" mode="aspectFill"></image>
						<text>{{msg.last_ceng.see_num}}</text>
					</view>
					<view class="flex_row">
						<image src="../../static/image/pl.png" mode="aspectFill"></image>
						<text>{{msg.last_ceng.ping_num}}</text>
					</view>
					<view @tap="bindFlower" hover-class="iconHover" class="flex_row">
						<image v-if="msg.last_ceng.flower_num==0" src="../../static/image/hua.png" mode="aspectFill"></image>
						<image v-else src="../../static/image/huaon.png" mode="aspectFill"></image>
						<text>{{msg.last_ceng.flower_num}}</text>
					</view>
				</view>
			</view>
			<!-- 留言 -->
			<view v-if="nolist"><nolist nolistTxt="暂无评论"></nolist></view>
			<view v-else class="leaving">
				<view @tap="bindleav(item)" v-for="(item,index) in commentList" :key="index" :class="{top_m:item.hui.is_hui==0}" class="leavList">
					<view class="people flex_row">
						<view class="img"><image @tap.stop="bindcomuser(item.uid)" v-if="item.hui.is_hui==0" :src="item.avatarurl" mode="aspectFill"></image></view>
						<view class="peopleTxt">
							<block>
								<view @tap.stop="bindcomuser(item.uid)" class="peopleName flex_row">
									<text>{{item.nickname}}</text>
									<image v-if="item.gender==1" src="../../static/image/man.png"></image>
									<image v-else src="../../static/image/woman.png"></image>
								</view>
								<view class="commentTxt"><text v-if="item.hui.is_hui!=0">回复{{item.hui.nickname}}：</text>{{item.c_content}}</view>
								<view class="commentTime">{{item.add_time}}</view>
							</block>
						</view>
					</view>
				</view>
				<load :loading="loading" :loadTxt="loadTxt"></load>
			</view>
		</scroll-view>
		<view class="inputCont flex_row">
			<view class="send flex_row"><input @input="sendInput" maxlength="50" cursor-spacing="20" @confirm="sendInput" :focus="focus" confirm-type="send" type="text" :placeholder="plaTxt" placeholder-class="pla" :value="levTxt" /></view>
			<view @tap="bindSend" class="btn">发送</view>
		</view>
	</view>
</template>
<script>
	import common from "../../common/network.js";
	import headTitle from "../../components/headTitle.vue";
	import load from "../../components/load.vue";
	import nolist from "../../components/nolist.vue";
	let session = '',communityId = '',page=1,fullPage=1,hui_id='';
	var arr = [];
	let c_list = {
			"avatarurl":"",
      "c_content": "",
      "nickname": "",
      "gender": "",
      "hui": {
        "is_hui": "0",
      }
    };
	export default {
		name:'community',
		components:{headTitle,load,nolist},
		data(){
			return{
				windowH:0,
				msg:'',commentList:[],levTxt:'',
				nolist:false,loading:false,loadTxt:'正在加载...',
				plaTxt:'我来说两句...',focus:false,
			}
		},
		onLoad:function(options){
			if(options.session!=undefined){
				communityId = options.communityId;
				session = options.session;
				page=1,hui_id='';
				this.getDetail(1);
			}
		},
		onShow:function(){
			hui_id = '';
			this.levTxt = '';
			this.plaTxt = "我来说两句...";
		},
		methods:{
			bindcomuser:function(id){
				uni.navigateTo({
					url: "/pagesA/userInfo/userInfo?session="+session+"&userid="+id
				})
			},
			bindDel:function(id){
				var that = this;
				uni.showModal({
					content: '确认删除该条动态吗？',
					confirmColor:'#6278FF',
					success:function(res){
						if(res.confirm){
							var $data = {
								'type':'zcommunity_del_ac',
								'session':session,
								'id':id,
							};
							common.network.request($data,function(res){
								console.log(res);
								uni.setStorage({
									key: 'delList',
									data: 1,
									success:function(){
										uni.showToast({
											icon: 'success',
											title: '删除成功',
											success:function(){
												setTimeout(function(){
													uni.navigateBack({
														
													})
												},1500)
											}
										})
									}
								})
							})
						}
					}
				})
			},
			bindReport:function(id){
				uni.navigateTo({
					url:"/pagesA/report/report?session="+session+"&tid="+id
				})
			},
			bindUser:function(id){
				uni.navigateTo({
					url: "/pagesA/userInfo/userInfo?userid="+id+"&session="+session
				})
			},
			bindFlower:function(){
				var that = this;
				var $data = {
					'type':'zcommunity_ins_flower',
					'session':session,
					'c_id':communityId,
				};
				uni.showModal({
					content:"送TA一朵花",
					confirmColor:'#6278FF',
					confirmText:'赠送',
					success:function(res){
						if(res.confirm){
							common.network.request($data,function(res){
								that.getDetail(0);
							})	
						}
					}
				})
			},
			getDetail:function(addnum){
				var that = this;
				var $data = {
					'type':'zcommunity_one_item',
					'session':session,
					'c_id':communityId,
					'see_add':addnum
				};
					uni.showLoading({
						title:'正在加载...'
					})
				common.network.request($data,function(res){
					console.log(res)
					page=1;
					var nums = {'ping':res.last_ceng.ping_num,'hua':res.last_ceng.flower_num};
					uni.setStorage({
						key:'commentNum',
						data:nums,
					})
					common.network.getHeight(function(h,w){
						that.windowH = h - w/750 * 142;
					})
					that.msg = res;
					arr = [];
					var list = res.img_arr.c_img;
					for (var i = 0; i < list.length; i++) {
						arr.push(list[i].c_img);
					}
					that.getComment('shows');
				})
			},
			lookImg:function(id){
				uni.previewImage({
					urls:arr,
					current:arr[id]
				})
			},
			getComment:function(shows){
				var that = this;
				var commentList = that.commentList;
				var $data = {
					'type':'zcommunity_one_item_comm',
					'c_id':communityId,
					'page':page
				};
				common.network.request($data,function(res){
					console.log(res);
					uni.hideLoading();
					fullPage = res.pageData.pagecount;
					if(shows){
						that.commentList = res.list;
					}else{
						that.commentList = commentList.concat(res.list);
					}
					that.loading = false;
					if(commentList.concat(res.list)==''){
						that.nolist= true;
					}else{
						that.nolist= false;
					}
				})
			},
			bindlist:function(){
				hui_id = '';
				this.levTxt = '';
				this.plaTxt = "我来说两句...";
			},
			bindleav:function(item){
				this.focus = true;
				hui_id = item.id;
				this.plaTxt = "回复:"+item.nickname;
			},
			sendInput:function(e){
				this.levTxt = e.detail.value;
			},
			bindSend:function(){
				var that = this;
				if((that.levTxt).replace(/(^\s*)|(\s*$)/g, "") == ""){
					return false;
				}
				var $data = {
					'type':'zcommunity_ins_comment',
					'session':session,
					'c_content':encodeURI(that.levTxt),
					'c_id':communityId,
					'h_id':hui_id,
				};
				console.log($data)
				common.network.request($data,function(res){
					console.log(res);
					that.getDetail(0);
					that.levTxt = '';
					hui_id = '';
					that.plaTxt = "我来说两句...";
				})
			},
			scrolltolower:function(){
				this.loading = true;
				if(page>=fullPage){
					this.loadTxt = '我是有底线的';
					return false;
				}else{
					this.loadTxt = '正在加载...';
					page ++;
					this.getComment();
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F2F3F7;
	}
	.list{
		padding-top: 25px;
		
		background: #fff;
	}
	.list .box{
		padding: 0 30px;
	}
	.user{
		position: relative;
	}
	.user .report{
		color: #6673FF;
		width: 90px;
		text-align: right;
		font-size: 24px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.user .text{
		justify-content: space-around;
		align-items: flex-start;
		font-size: 32px;
		font-family: "黑体";
	}
	.headPic{
		width: 90px;
		height: 90px;
		border-radius: 50%;
		margin-right: 20px;
	}
	.name image{
		width: 28px;
		height: 28px;
		margin-left: 14px;
	}
	.time{
		font-size: 26px;
		margin-top: 10px;
		color: #8E8E8E;
	}
	.words{
		font-size: 30px;
		line-height: 44px;
		color: #3F3F3F;
		margin: 20px 0;
	}
	.img{
		justify-content: space-between;
	}
	.img.one image{
		width: 100%;
		height: 400px;
	}
	.img.two{
		justify-content: flex-start;
	}
	.img.two image{
		margin-right: 20px;
	}
	.img image{
		width: 32%;
		height: 230px;
		border-radius: 6px;
	}
	.icon{
		justify-content: space-between;
	}
	.iconHover{
		background: #f5f5f5;
	}
	.icon view{
		width: 33.33333%;
		font-size: 26px;
		padding: 22px 0;
		justify-content: center;
		color: #8D8D8D;
	}
	.icon image{
		width: 34px;
		height: 34px;
		margin-right: 12px;
	}
	.people .img{
		width: 80px;
		min-width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 20px;
	}
	.people .img image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.people{
		align-items: flex-start;
	}
	.leaving{
		margin-top: 10px;
		padding-bottom: 122px;
	}
	.leavList{
		background: #fff;
		padding: 0 30px;
		padding-bottom: 20px;
	}
	.leavList.top_m{
		margin-top: 1px;
		padding-top: 20px;
	}
	.leavList:first-of-type{
		margin-top: 0;
	}
	.peopleTxt .peopleName{
		font-size: 30px;
		color: #8789A0;
	}
	.peopleName image{/* 性别图标 */
		width: 28px;
		height: 28px;
		margin-left: 16px;
	}
	.peopleTxt view{
		padding-bottom: 10px;
	}
	.peopleTxt .commentTime{
		padding-bottom: 30px;
		color: #C0C0C0;
		font-size: 26px;
	}
	.peopleTxt .commentTime:last-of-type{
		padding-bottom: 0;
	}
	.commentTxt text{
		color: #6B70FF;
	}
	.inputCont{
		background: #fff;
		padding: 26px 30px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		box-shadow: 0 -1px 40px rgba(0,0,0,0.15);
	}
	.inputCont .send{
		background: #F2F3F7;
		width: 76%;
		height: 70px;
		box-sizing: border-box;
		padding: 0 15px;
		border-radius: 8px;
	}
	.inputCont input{
		width: 100%;
	}
	.inputCont .btn{
		width: 20%;
		background: #6673FF;
		color: #fff;
		font-size: 32px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		border-radius: 8px;
	}
</style>
